<template>
  <div>
    <!--新增或者编辑的弹出框-->
    <el-dialog :title="formTitle" :visible.sync="dialogFormVisible" :close-on-click-modal = "false" width="40%">
      <el-form class="form" :model="modelForm" :rules="rules" ref="modelForm" style="text-align: center">
        <el-form-item label="姓名" :label-width="formLabelWidth" align="left" prop="ename">
          <el-input v-model="modelForm.ename" autocomplete="off" :style="style"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" align="left">
          <!--label对应的是单选钮的value属性值-->
          <el-radio-group v-model="modelForm.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="职位" :label-width="formLabelWidth" align="left">
          <el-select v-model="modelForm.job" placeholder="请选择职位" :style="style" value="">
            <el-option v-for="job in jobList" :label="job.title" :value="job.value" :key="job.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属部门" :label-width="formLabelWidth" align="left">
          <el-select v-model="modelForm.deptno" placeholder="请选择所属部门" :style="style" value="">
            <el-option v-for="dept in deptList" :label="dept.dname" :value="dept.deptno" :key="dept.deptno"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth" prop="tel" align="left">
          <el-input v-model="modelForm.tel" autocomplete="off" :style="style"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: center">
        <el-button type="primary" @click="addOrEditData">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import modelMixin from '@/mixins/modelMixin'

    export default {
        name: "EmpModel",
        mixins: [modelMixin],
        props: {
            deptList: Array
        },
        data() {
            return {
                //表单标题
                title: "员工信息",
                //表单数据
                modelForm: {
                    empno: null,
                    ename: null,
                    sex: 1,
                    job: '',
                    deptno: null,
                    tel: null
                },
                jobList: null,
                //验证规则
                rules: {
                    //员工姓名不能为空
                    ename: [
                        {required: true, message: '请输入员工姓名',trigger: 'blur'}
                    ],
                    //联系电话
                    tel: [
                        { required: true, message: '请输入手机号码', trigger: 'blur' },
                        { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
                        {
                            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
                            message: '请输入正确的手机号码'
                        }
                    ]
                },
                //后台接口路径
                url: {
                    addData: 'addEmp',
                    editData: 'editEmp'
                },
                //主键
                key: 'empno'
            }
        },
        created() {
            //获取职位信息
            this.jobList = Object.values(this.$store.state.dict["job"]).map((item, index) => ({value: index + 1, title: item.text}))
        },
        methods: {
            /**
             * 重置表单
             */
            resetModelForm() {
                this.modelForm = {
                    empno: null,
                    ename: null,
                    sex: 1,
                    job: '',
                    deptno: null,
                    tel: null
                }
            }
        }
    }
</script>

<style scoped>
  .form {
    display: flex;
    flex-direction: column;
  }
</style>